<!--提前批页面-->
<style lang="scss" scoped>
@import '@/assets/styles/uno.scss';
.box-card {
  margin: 20px;
  .cardsize {
    display: flex;
    align-items: center;
    font-weight: 400;

    div {
      margin-left: 20px;
    }
  }
}

.publicTableBox {
  .tablec {
    border: 1px solid #004cf7;
    color: #004cf7;
    border-radius: 4px;
  }
}

:deep(.createPop) {
  .el-steps {
    width: 100%;
    .is-process {
      border-color: #004cf7; /* 图标边框颜色 */
      color: #004cf7; /* 图标文字颜色 */
    }
  }
}

.sendMsg {
  display: flex;
  align-items: center;
  gap: 5px;
  position: absolute;
  bottom: 10px;
  left: 24px;
  font-size: 14px;
  color: #1d2129;
  z-index: 9999 !important;

  .switchAc {
    color: #165dff;
  }
}
</style>
<template>
  <div>
    <el-card class="box-card">
      <!--志愿填报头部-->
      <template #header>
        <div class="card-header">
          <div class="cardsize">
            <h2 class="fs18 fw800">志愿填报</h2>
            <div style="font-size: 15px">共 {{ pageData.total ?? 0 }} 单</div>
            <div style="font-size: 15px">
              已处理 {{ totalCount.orderStatus_1 }} 单
            </div>
            <div style="font-size: 15px">
              已审核{{ totalCount.orderStatus_2 }}单
            </div>
            <div style="font-size: 15px">
              已完成{{ totalCount.orderStatus_3 }}单
            </div>
          </div>
        </div>
      </template>

      <!-- 搜索表单条件 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            v-model="pageData.search"
            placeholder="考生/考生/手机号"
            clearable
            @clear="searchChange"
          >
            <template #append>
              <el-button
                type="primary"
                style="height: 40px"
                @click="searchChange"
                >搜索</el-button
              >
            </template>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="pageData.gkaProvinceNumId"
            class="m-2"
            placeholder="省份"
            size="large"
            clearable
            @change="searchChange"
          >
            <el-option
              v-for="item in provincelist"
              :key="item.id"
              :label="item.provinceName"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="pageData.graduate_time"
            class="m-2"
            placeholder="高考年份"
            size="large"
            clearable
            @change="searchChange"
          >
            <el-option
              v-for="item in gaokaoyear"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            v-model="pageData.orderStatus"
            class="m-2"
            placeholder="状态"
            size="large"
            clearable
            @change="searchChange"
          >
            <el-option
              v-for="item in statuslist"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            />
          </el-select>
        </el-col>
        <el-col :span="10" style="display: flex; justify-content: flex-end">
          <el-button
            style="height: 40px"
            @click="onClickBatchDistribution"
            v-hasPermi="['leader:filling:add']"
            >批量分配</el-button
          >
          <!-- v-hasPermi="['leader:filling:download']" -->
          <el-button
            :icon="Bottom"
            style="height: 40px"
            @click="onClickOrdersExport"
            >下载</el-button
          >
          <!--   v-hasPermi="['leader:filling:addkd']" -->
          <el-button
            type="primary"
            :icon="Plus"
            style="height: 40px"
            @click="addUserOrder"
            >创建客单</el-button
          >
        </el-col>
      </el-row>
      <el-divider />
      <!-- 表格分页部分 -->
      <publicTable
        v-if="true"
        class="mt10 publicTableBox"
        :tableData="tableData"
        :tableConfig="tableColumn"
        :page="pageData"
        @sizeChange="sizeChange"
        @pageChange="pageChange"
        @selectChange="selectChange"
      >
        <!-- 志愿表列 -->
        <template #zyTableCommonCount="{ row }">
          <div class="tablec df jcsb pl10 pr10" @click="onClickzybList(row)">
            <p>模{{ row.zyTableCommonCount }}</p>
            <p>高{{ row.zyTableGKCount }}</p>
          </div>
        </template>
        <!-- 自定义姓名列 -->
        <template #studentName="{ row }">
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="row.gkaProvinceName"
            placement="top"
          >
            <div
              v-if="!row.student"
              style="color: #165dff; cursor: pointer"
              :class="{
                isPassed: row.passed,
              }"
            >
              {{ row.studentName }}
            </div>
            <div
              v-else
              style="color: #165dff; cursor: pointer"
              :class="{
                isPassed: row.passed,
              }"
              @click="lookUserInfo(row)"
            >
              {{ row.studentName }}
            </div>
          </el-tooltip>
        </template>
        <!-- 自定义成绩列 -->
        <template #grade="{ row }">
          <div v-if="!!row.student">
            <div
              v-if="row.isGKB == 1 && row.student.gkb_score_num == 0"
              @click="lookGradeChange(row)"
              style="color: rgb(22, 93, 255)"
            >
              请创建高考成绩
            </div>
            <div v-else-if="row.isGKB == 1 && row.student.gkb_score_num == 1">
              {{
                row.student
                  ? row.student.score +
                    '分 ' +
                    row.student.section +
                    '位 ' +
                    row.student.sgname
                  : ''
              }}
            </div>
            <div v-else>
              {{
                row.student
                  ? row.student.score +
                    '分 ' +
                    row.student.section +
                    '位 ' +
                    row.student.sgname
                  : ''
              }}
              <el-icon
                size="18"
                @click="lookGradeChange(row)"
                style="cursor: pointer"
              >
                <EditPen />
              </el-icon>
            </div>
          </div>
        </template>
        <!-- 自定义老师列 -->
        <template #teacher="{ row, index }">
          <div v-if="!row.student" :class="row.passed == 1 ? 'isPassed' : ''">
            {{ row.teacher }}
          </div>
          <div v-else>
            <el-dropdown
              trigger="click"
              @command="onClickAccounList"
              :disabled="row.passed == 1"
            >
              <span :class="row.passed == 1 ? 'isPassed' : 'el-dropdown-link'">
                {{ row.teacher }}
                <el-icon
                  class="el-icon--right"
                  v-hasPermi="['leader:filling:add']"
                >
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu
                  v-hasPermi="['leader:filling:add']"
                  style="max-height: 400px; overflow: hidden; overflow-y: auto"
                >
                  <el-dropdown-item
                    :command="{ item, index: index }"
                    v-for="(item, ind) in teacherArr"
                    :key="ind"
                    >{{ item.realName }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
        <!-- 自定义按钮列 -->
        <template #default="{ row }">
          <div v-if="!!row?.student && row?.passed == 0">
            <el-tooltip
              v-if="row.isGKB == 1 && row.student.gkb_score_nufm == 0"
              class="box-item"
              effect="dark"
              content="请先创建高考成绩"
              placement="top"
            >
              <el-icon
                size="24"
                color="#165dff"
                style="cursor: pointer; margin-top: 8px; color: #86909c"
              >
                <Edit />
              </el-icon>
            </el-tooltip>

            <el-tooltip
              v-else-if="row.student.score !== 0"
              class="box-item"
              effect="dark"
              content="填报"
              placement="top"
            >
              <el-icon
                size="24"
                :color="'#165dff'"
                style="cursor: pointer; margin-top: 8px"
                @click="fillSubmitChange(row)"
                v-hasPermi="['leader:filling:filling']"
              >
                <Edit />
              </el-icon>
            </el-tooltip>
          </div>
        </template>
      </publicTable>
    </el-card>
    <!-- 点击创建客单弹窗 -->
    <addUserInfo
      ref="addUserInfoRef"
      :provincelist="gkaProvinceNumIdForAddUser"
      :gaokaoyear="studentGaoKaoYearAddUser"
      @refreshStudentList="pagination"
      @getTzyCount="getTzyCount"
    ></addUserInfo>
    <!-- 点击成绩弹窗 -->
    <userUpdate
      ref="userUpdatesRef"
      @refreshStudentList="pagination"
      @getTzyCount="getTzyCount"
    ></userUpdate>
    <!--点击志愿表弹窗-->
    <userZyList ref="userZyListsRef"> </userZyList>
    <!--填报弹窗-->
    <filingDialog ref="filingDialogsRef"></filingDialog>
    <!--点击姓名弹窗-->
    <lookuserDate ref="lookuserDateRef"></lookuserDate>
  </div>
</template>

<script setup>
// 新接口
import { Plus, Bottom } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import {
  tzyOrdersListFilter,
  tzyOrdersExport,
  tzyOrders,
  tzyOrdersCount,
  tzyOrdersCreate,
} from '@/api/leader/Filling.js';
import { tableColumn } from './tableColumn.js';
import { omit } from 'lodash';
import addUserInfo from './module/addUserInfo.vue';
import userUpdate from './module/userUpdate.vue';
import userZyList from './module/userZyList.vue'; //志愿表弹窗
import filingDialog from './module/filingDialog.vue'; //填报弹窗
import { accountList } from '@/api/system/account.js';
import lookuserDate from './module/lookuserDate.vue'; //点击姓名弹窗
const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 100,
  search: '', //电话号码
  gkaProvinceNumId: null, //省份
  graduate_time: null, //高考年份
  orderStatus: null, //状态
});
// 表单部分逻辑===========================================================
// 表单部分逻辑===========================================================
const provincelist = JSON.parse(localStorage.getItem('provincelist')); // 省份数据
//获取高考年份
const gaokaoyear = ref([]); // 高考年份
const gkaProvinceNumIdForAddUser = ref([]); // 创建所需高考省份
const studentGaoKaoYearAddUser = ref([]); // 创建所需高考年份
const statuslist = ref([]); // 查询状态
// 获取年份 状态 高考省份 高考年份
const searchDate = () => {
  tzyOrdersListFilter().then((res) => {
    // provincelist.value = res.data[0].data;
    gaokaoyear.value = res.data[1].data;
    statuslist.value = res.data[2].data;
    gkaProvinceNumIdForAddUser.value = res.data[3].data;
    studentGaoKaoYearAddUser.value = res.data[4].data;
  });
};
searchDate();
// 点击批量分配
const selStudentArr = ref([]); // 选中学生数组
const onClickBatchDistribution = () => {
  if (selStudentArr.value.length == 0) {
    ElMessage({
      message: '请选择需要分配的学生',
      type: 'warning',
    });
    return;
  }
  console.log('点击批量分配了');

  // batchDistributionRef.value.openChange(); //打开弹窗分配给老师
};

// 点击下载
const onClickOrdersExport = () => {
  tzyOrdersExport(pageData.value).then((res) => {
    window.location.href = res.data.url;
    ElMessage.success('导出成功');
  });
};
// 创建客单按钮
function addUserOrder() {
  console.log('创建客单按钮');
  addUserInfoRef.value.showAddUserInfo();
}
// 清空表单图标
const searchChange = () => {
  // 添加查询参数
  // pageData.value.search = searchKey.value
  pageData.value.page = 1;
  pagination();
};

// 表格部分数据和逻辑===========================================================
// 表格部分数据和逻辑===========================================================
const tableData = ref([]);

//每页条数发生改变
const sizeChange = (val) => {
  pageData.value.page = 1;
  pageData.value.pageSize = val;
  console.log(pageData.value.pageSize, '每页条数发生改变');
  pagination();
};
//当前页数发生改变
const pageChange = (val) => {
  pageData.value.page = val;
  console.log(pageData.value.page, '当前页数发生改变');
  pagination();
};
// 多选表单数据
const selectChange = (val) => {
  selStudentArr.value = val;
};

const userUpdatesRef = ref(null);
const isGkData = ref({});
const totalCount = ref({});
const userZyListsRef = ref(null); //志愿表弹窗ref
const filingDialogsRef = ref(null); //填报弹窗ref
const lookGradeChange = (val) => {
  if (val.passed) return;
  userUpdatesRef.value.openChange(val, isGkData.value);
};

const getTzyCount = () => {
  tzyOrdersCount().then((res) => {
    totalCount.value = res.data;
  });
};
getTzyCount();

// 点击志愿表弹框
const onClickzybList = (val) => {
  localStorage.setItem('student_id', val.studentId);
  localStorage.setItem('student_Province', val.gkaProvinceNumId);
  userZyListsRef.value.openChange(val);
};
// 点击填报按钮
const fillSubmitChange = (val) => {
  localStorage.setItem('student_id', val.studentId);
  localStorage.setItem('student_Province', val.gkaProvinceNumId);
  filingDialogsRef.value.openChange(val, isGkData.value);
};
const teacherArr = ref([]); // 老师数组

// 获取老师列表
const getAccountList = () => {
  accountList({
    pageSize: 100,
  }).then((res) => {
    teacherArr.value = res.data.data;
  });
};
getAccountList();
// 点击老师列下拉
const onClickAccounList = (command) => {
  let item = command.item;
  let index = command.index;

  let data = {};
  console.log(command, 'commandcommand');

  data['id'] = tableData.value[index].id;
  data['teacherId'] = item.id;
  data['teacher'] = item.realName;

  // 更新用户信息
  tzyOrdersCreate(data).then(() => {
    tableData.value[index].teacherId = item.id;
    tableData.value[index].teacher = item.realName;
    // 更新表单数量
    getTzyCount();
  });
};

const lookuserDateRef = ref(null);
// 点击姓名列
const lookUserInfo = (val) => {
  if (val.passed) return;
  lookuserDateRef.value.openChange(val);
};

// 点击创建客单逻辑===============================================
// 点击创建客单逻辑===============================================

const addUserInfoRef = ref(null);
const pagination = async () => {
  let data = pageData.value;
  Object.keys(data).forEach((key) => {
    // 检查值是否为数组、字符串并且长度为0，或值为 undefined
    if (
      (Array.isArray(data[key]) && data[key].length === 0) ||
      data[key] === undefined ||
      data[key] === null
    ) {
      delete data[key];
    }
  });
  let res = await tzyOrders(omit(data, 'total'));
  console.log('加载分页数据', res);
  let response = res.data;
  tableData.value = response.data; //表格数据
  pageData.value.total = res.data.total; //总数
};
pagination();
</script>
